import React, { Component } from 'react';
import axios from '../../utils/myaxios'
import {withRouter} from 'react-router-dom'
import { Carousel, WingBlank } from 'antd-mobile';

import './Home.css'
import Search from '../Search/search'

class Home extends Component {
    state = {
        bannerImg: [],//轮播图数据
        sortData: [], //类别数据
        homeImg: []  //首页图片数据
    }
    // 轮播图点击事件
    bannerClick = (id) => {
        console.log(id)
    }
    // 类别点击事件
    sortClick = (params) => {
        this.props.history.push('/category')
    }

    componentDidMount() {
        // 轮播图数据请求
        axios.get('home/swiperdata').then(res => {
            this.setState({
                bannerImg: res
            })
        }).catch((err) => console.log(err));

        // 首页分类数据请求
        axios.get('home/catitems').then(res => {
            this.setState({
                sortData: res
            })
        }).catch(err => console.log(err))

        // 首页图片数据请求
        axios.get('home/floordata').then(res => {
            this.setState({
                homeImg: res
            })
        }).catch(err => console.log(err))
    }
    render() {
        return (
            <div>
                {/* 首页标题开始 */}
                <section className="homeTitle">
                    <h1>优购商城</h1>
                </section>
                {/* 首页标题结束 */}
                {/* 首页搜索开始 */}
                <section className="homeSearch">
                    <Search></Search>
                </section>
                {/* 首页搜索结束 */}
                {/* 首页轮播图开始 */}
                <section className="homeBanner">
                    <WingBlank style={{ margin: 0 }}>
                        <Carousel
                            autoplay={true}
                            infinite
                        >
                            {this.state.bannerImg.map(val => (
                                <img
                                    onClick={this.bannerClick.bind(this, val.goods_id)}
                                    key={val.image_src}
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            ))}
                        </Carousel>
                    </WingBlank>
                </section>
                {/* 首页轮播图结束 */}
                {/* 首页分类栏开始 */}
                <section className="homeSort">
                    {this.state.sortData.map(val => {
                        return (
                            <div
                                className="homeSortItem"
                                key={val.name}
                                onClick={this.sortClick}>
                                <img src={val.image_src} alt={val.name} />
                            </div>
                        )
                    })}
                </section>
                {/* 首页分类栏结束 */}
                {/* 首页图片列表栏开始 */}
                <section className="homeImg">
                    {this.state.homeImg.map(val => {
                        return (
                            <div className="homeImgItem" key={val.floor_title.name}>
                                <h2>
                                    <img src={val.floor_title.image_src} alt={val.floor_title.name} />
                                </h2>
                                <div className="homeImgItemContent">
                                    <div className="homeImgItemContentL">
                                        <img src={val.product_list[0].image_src} alt={val.product_list[0].name} />
                                    </div>
                                    <div className="homeImgItemContentR">
                                        {val.product_list.slice(1, val.product_list.length).map((v) => {
                                            return (
                                                <img src={v.image_src} alt={v.name} key={v.name} />
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </section>
                {/* 首页图片列表栏结束 */}
            </div>
        );
    }
}

export default withRouter(Home);


